<template>
  <div class="container" v-show="show">
    <div class="bg">
        <div class="cont-wrap">
            <div class="cont-top">
                <span>新建模块</span>
                <span @click="cancelHandler(formRef)">x</span>
            </div>
            <div class="cont-body">
                <el-form label-position="right" ref="formRef" :model="form" :rules="rules" :label-width="100">
                    <el-form-item label="模块名称" prop="moduleEnName">
                        <el-input placeholder="请输入模块名称" v-model="form.moduleEnName" />
                    </el-form-item>
                    <el-form-item label="显示名称" prop="moduleZhName">
                        <el-input placeholder="请输入显示名称" v-model="form.moduleZhName" />
                    </el-form-item>
                    <el-form-item label="所属方案" prop="solutionName">
                        <el-select v-model="form.solutionName" placeholder="请选择一个方案" :with="`100%`" @change="solutionInputChange">
                            <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上级模块" prop="parentModule">
                        <el-input placeholder="请选择上级模块" v-model="form.parentModule" />
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input type="textarea" placeholder="请输入备注" v-model="form.note" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="footer">
                <el-button class="btn" @click="cancelHandler(formRef)">取消</el-button>
                <el-button class="btn" type="primary" @click="submitHandler(formRef)">创建</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getWorkSysApi } from "../../api/uiModel"
import { ElMessage } from "element-plus"
import { reactive, ref, toRefs, watch } from "vue"
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({ //获取父组建传过来的值
    show: {
        type: Boolean,
        default: false,
        require: true
    }
})
const emit = defineEmits(['cancelEventEmit', 'submitEventEmit']) // 注册emit事件
let list = ref([{ // 所属服务
    label: '',
    value: ''
}])
const formRef = ref<FormInstance>()
const form = reactive({
    moduleEnName: '',
    moduleZhName: '',
    solutionName: '',
    parentModule: '',
    note: '',
})
const rules = reactive<FormRules>({
    moduleEnName: [{required: true, message: '请输入模块名称', trigger: 'blur'}],
    moduleZhName: [{required: true, message: '请输入显示名称', trigger: 'blur'}],
    solutionName: [{required: true, message: '请选择所属方案', trigger: 'change'}],
})
let modeList = ref([{
    label: '',
    value: ''
}])

// 取消按钮事件
const cancelHandler = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    const flag = !props.show
    emit('cancelEventEmit', flag)
}
// 创建按钮事件
const submitHandler = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
             const data = {
                ...form,
                type: 'module'
            }
            emit('submitEventEmit', data)
            formEl.resetFields()
        } else {
            console.log('error ', fields)
        }
    })
}
const solutionInputChange = function() {
    let data
    list.value.map(ele => {
        if(form.solutionName === ele.value) {
            data = ele
        }
    })
    if(data.children && data.children.length > 0) {
        modeList.value = data.children
    }
}

const getSysData = async () => {
    const result = await getWorkSysApi()
    const data = result.data
    const storageSolution = localStorage.getItem('SOLUTION_ARR')
    if (storageSolution) {
        const arr = JSON.parse(storageSolution).map(ele => {
            ele.value = ele.solutionZhName
            ele.label = ele.solutionZhName
            return ele
        })
        list.value = [...arr, ...data]
    } else {
        list.value = data
    }
    console.log(list.value)
}

getSysData()

</script>
<style lang='scss' scoped>
.container {
    .bg {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        background: rgba(0,0,0,.7);
        .cont-wrap {
            width: 25%;
            min-height: 300px;
            background: #2B2B2B;
            border-radius: 5px;
            .cont-top {
                padding: 5px 20px;
                display: flex;
                justify-content: space-between;
                color: #ADADAD;
                background: #3C3C3C;
                border-bottom: 1px solid #CDCDCD;
                span {
                    &:last-child {
                        cursor: pointer;
                    }
                }
            }
            .cont-body {
                padding: 20px 20px 0;
            }

            .footer {
                padding: 20px 20px 20px 0;
                display: flex;
                flex-direction: row-reverse;
                .btn {
                    margin-right: 10px;
                }
            }
        }
    }
    
}
</style>